<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#202224" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item @click="clickMenu(item)" v-for="item in menuData" :key="item.name" :index="item.path">
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{ item.label }}</span>
        </el-menu-item>
    </el-menu>
</template>
  
<script>
export default {
    data() {
        return {
            menuData: [
                {
                    name: 'admin',
                    label: '管理员管理',
                    icon: 'user-solid',
                    path: '/admin'
                },
                {
                    name: 'adminadd',
                    label: '添加管理员',
                    icon: 'user',
                    path: '/adminadd'
                },
                {
                    name: 'user',
                    label: '用户管理',
                    icon: 's-custom',
                    path: '/user'
                },
                {
                    name: 'share',
                    label: '分享管理',
                    icon: 'share',
                    path: '/share'
                },
                {
                    name: 'disk',
                    label: '云盘使用情况',
                    icon: 's-data',
                    path: '/disk'
                }
            ]
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //点击菜单跳转导航路由
        clickMenu(item) {
            //获取路由使用push跳转
            console.log(item.path)

            //判断当前路由与跳转路由是否一致 一致就不跳转
            if (this.$route.path != item.path && !(this.$route.path === '/admin' && item.path === '/')) {
                this.$router.push(item.path)
            }
        }
}
};
</script>
  
<style lang="less" scoped></style>
  